<template>
  <div class="sdy-cart">
    <SdyHeader title="啥都有 ~ 购物车" back></SdyHeader>

    <div class="top">
      <van-radio :checked="selectAll" class="select-item" name="1"></van-radio>
    </div>

    <ul class="cart">
      <li v-for="item in cartList" :key="item.proid">
        <van-radio @click="updateStatus(item.cartid, !item.flag)" :checked="item.flag" class="select-item" name="1"></van-radio>
        <van-card
          class="goods-item"
          :price="item.originprice"
          desc="描述信息"
          :title="item.proname"
          :thumb="item.img1"
        >
          <template #tags>
            <van-tag plain type="primary">-</van-tag>
            <input class="num-inp" type="text" :value="item.num">
            <van-tag plain type="primary">+</van-tag>
          </template>
          <template #footer>
            <van-button size="mini">按钮</van-button>
            <van-button size="mini">按钮</van-button>
          </template>
        </van-card>
      </li>
    </ul>

    <div class="bottom">
      总价 : {{ totalPrice.toFixed(2) }}
    </div>

    <hr>
    <hr>

    {{ goodsList }}

    <!-- 底部内容 -->
    <Teleport to="#sdy-footer">
      <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" />
        <van-action-bar-icon @click="$router.push('/order')" icon="cart-o" text="查看订单" />
        <van-action-bar-icon icon="shop-o" text="店铺" />
        <van-action-bar-button @click="addOrderHandler" type="danger" text="生成订单" />
      </van-action-bar>
    </Teleport>
  </div>
</template>

<script setup lang="ts">
// 验证登录
import { onMounted, ref, computed } from 'vue'
import { useRouter, type Router } from 'vue-router'
import { Dialog } from 'vant'
import { getCartListApi, updateStatusApi } from '@/api/cart'
import { addOrderApi } from '@/api/order'
import { hotSearchApi } from '@/api/goods'
import type { MyCartItem, MyHotItem } from '@/config/interface'

const $router: Router = useRouter()

const token = window.localStorage.getItem('token')
const user_id = window.localStorage.getItem('user_id')

// 验证 user_id
const testToken = () => {
  if (!token || !user_id) {
    Dialog({
      title: '提示',
      message: '您还没有登录'
    }).then(() => {
      $router.push({ path: '/login' })
    })
    return
  }
}

// 获取购物车列表
const cartList = ref<MyCartItem[]>([])
const getCartList = async () => {
  const res = await getCartListApi(user_id as string)
  cartList.value = res.data
  console.log(res)
}

// 获取热门相关内容
const goodsList = ref<MyHotItem[]>([])
const getGoodsList = async () => {
  const res = await hotSearchApi()
  goodsList.value = res.data
}

// 准备一个全选
const selectAll = computed(() => {
  return cartList.value.every(item => item.flag)
})

// 准备一个总价
const totalPrice = computed(() => {
  return cartList.value.reduce((prev, item) => {
    if (item.flag) {
      return prev + (item.originprice * item.num)
    } else {
      return prev
    }
  }, 0)
})

// 修改购物车选中状态
const updateStatus = async (id: string, flag: boolean) => {
  const res = await updateStatusApi(id, flag)
  console.log(res)
  if (res.code === '200') {
    getCartList()
  }
}

onMounted(() => {
  testToken()
  getCartList()
  getGoodsList()
})

// 生成订单
const addOrderHandler = async () => {
  const res = await addOrderApi(user_id as string)
  console.log(res)
  // 把订单信息存储在 localStorage 内
  window.localStorage.setItem('time', ((res as unknown) as { time: string }).time)
}

</script>

<style scoped lang="scss">
.cart {

  li {
    display: flex;
    box-sizing: border-box;
    padding: 0 10px;

    > .select-item {
      width: 30px;
    }

    > .goods-item {
      flex: 1;
    }
  }
}

.num-inp {
  width: 30px;
  text-align: center;
  margin: 0 10px;

}

</style>
